<template>
  <div class="contribution">
    <div class="contaniner">
      <div class="left">
        <div style="height:150vh;overflow-y:auto;background:#fff;"> 
          <el-tree
            :data="agentUserList"
            :expand-on-click-node="true"
            :default-expand-all="false"
            ref="tree"
            @node-click="handleNodeClick"
          />
        </div>
      </div>
      <div class="right">
        <el-card class="box-card mt-15">
          <div class="home-form">
            <el-form ref="ruleForm" @submit.native.prevent>
              <el-row :gutter="50">
                <el-col :span="5">
                  <el-form-item label="代理名称" label-width="70px">
                    <el-input clearable size="mini" v-model.trim="queryData.username" maxlength="24"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="代理编号" label-width="70px">
                    <el-input clearable size="mini" v-model.trim="queryData.custNo" maxlength="24"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="手机号" label-width="70px">
                    <el-input clearable size="mini" v-model.trim="queryData.phone" maxlength="24"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label-width="70px" label="是否确认">
                    <el-select size="mini" style="width:100%" v-model="queryData.isConfirm">
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label-width="70px" label="是否级联查询">
                    <el-select size="mini" style="width:100%" v-model="queryData.isCascade">
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>                     
                <el-col :span="5">
                  <el-form-item label-width="70px" label="是否已领取">
                    <el-select size="mini" style="width:100%" v-model="queryData.isGet">
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="70px" label="结算时间">
                      <el-date-picker v-model="changtime" size="mini" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :editable='false' value-format="yyyy-MM-dd" :picker-options="pickerOptions" clearable>
                      </el-date-picker>
                    </el-form-item>
                </el-col> 
                <el-col :span="5">
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch" class="search-btn">搜索</el-button>
                  <el-button type="danger" size="mini" @click="handleReset" class="search-btn">重置</el-button>
                </el-col>                
              </el-row>
            </el-form>
          </div>
        </el-card>
        <el-card class="body">
          <div slot="header" class="clearfix fix-lh">
            <span>伯乐奖</span>
            <div class="btn-list">
              <el-button @click="goRefresh">刷新</el-button>              
              <el-button @click="download">导出</el-button>
            </div>
          </div>
          <div class="table-body">
            <cvue-table :data="tableData" :isShowPage="pageShow" :page="page" :tablePage="tablePage" :pageSize="page.pageSize" :loading="tableLoading" @current-change="handleCurrentChange" @size-change="handleSizeChange" :option="tableOption">
              <template slot-scope="scope" slot="yhxm">
                <span>{{scope.row.yhxm }}</span>
              </template>  
              <template slot-scope="scope" slot="custNo">
                <span>{{scope.row.custNo}}</span>
              </template>          
              <template slot-scope="scope" slot="lxdh">
                <span>{{scope.row.lxdh}}</span>
              </template>
              <template slot-scope="scope" slot="djsj">
                <span>{{scope.row.djsj}}</span>
              </template>
              <template slot-scope="scope" slot="blj">
                <span>{{scope.row.gxj}}</span>
              </template>
              <template slot-scope="scope" slot="bljzz">
                <span>{{scope.row.gxjzz}}</span>
              </template>
              <template slot-scope="scope" slot="fysfylq">
                <span>{{scope.row.fysfylq ==1 ? '是' : scope.row.fysfylq == 0 ? '否' : '否'}}</span>
              </template>       
              <template slot-scope="scope" slot="jszt">
                <span>{{scope.row.jszt ==1 ? '是' : scope.row.jszt == 0 ? '否' : '否'}}</span>
              </template>        
              <template slot-scope="scope" slot="sfxnyh">
                <span>{{scope.row.sfxnyh ==1 ? '是' : scope.row.sfxnyh == 0 ? '否' : '否'}}</span>
              </template>
              <template slot-scope="scope" slot="sjtjrMc">
                <span>{{scope.row.sjtjrMc}}</span>
              </template>
              <template slot-scope="scope" slot="dljbId">
                <span>{{dljbType(scope.row.dljbId)}}</span>
              </template>
              <template slot-scope="scope" slot="yhzt">
                <span>{{stateType(scope.row.yhzt)}}</span>
              </template>
              <template slot-scope="scope" slot="tjrmc">
                <span>{{scope.row.tjrmc }}</span>
              </template>
              <template slot-scope="scope" slot="tjrmcNew">
                <span>{{scope.row.tjrmcNew }}</span>
              </template>
              <template slot-scope="scope" slot="khhmc">
                <span>{{scope.row.khhmc }}</span>
              </template>
              <template slot-scope="scope" slot="khm">
                <span>{{scope.row.khm }}</span>
              </template>
              <template slot-scope="scope" slot="yhkh">
                <span>{{scope.row.yhkh }}</span>
              </template>
              <template slot-scope="scope" slot="shdz">
                <span>{{scope.row.shdz }}</span>
              </template>
              <template slot-scope="scope" slot="jssj">
                <span>{{scope.row.jssj }}</span>
              </template>
              <el-table-column v-if="hasPermission" slot="actionMenu" label="操作" align="center" header-align="center" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text"
                    size="small"
                    @click="handleEdit(scope.row)"
                    v-hasPermission="permission.edit"
                    :disabled="isConfirm(scope.row.fysfylq)">领取确认
                  </el-button>
                </template>
              </el-table-column>
            </cvue-table>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import cvueTable from '@/components/cvue-table'
import cvueDialog from '@/components/cvue-dialog'
import { touchRefresh } from '@/mixins/mixinKeep'

export default {
  name: 'agent',
  mixins: [touchRefresh],
  components: {
    cvueTable,
    cvueDialog
  },
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time > new Date().getTime()
        }
      },
      hasPermission: false,
      changeMode: false,
      isDisabled: false,
      addOrEdit: 'add',
      changtime: '',
      queryData: { 
        agentId: '',
        username: '',
        custNo: '',        
        phone: '',
        beginDate: '',
        endDate: '',
        isConfirm: '',
        isGet: '',
        isCascade: '1'
      },
      tablePage: 1,
      pageShow: true,
      page: {
        total: 1, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
        pageSizes: [10, 50, 100]
      },
      tableLoading: false,
      date: [],
      tableData: [],
      tableOption: {
        stripe: true,
        border: true,
        width: '100%',
        index: false,
        cloumn: [
          { prop: 'index', label: '序号', align: 'center', width: 80 },
          { prop: 'custId', label: '代理名称', align: 'center', width: 80 },
          { prop: 'custNo', label: '代理编号', align: 'center', slotStatus: true },
          { prop: 'lxdh', label: '手机号', align: 'center', slotStatus: true },
          { prop: 'djsj', label: '注册日期', align: 'center', slotStatus: true },  
          { prop: 'gxj', label: '本期贡献奖(本人)', align: 'center', slotStatus: true },  
          { prop: 'gxjzz', label: '本期贡献奖(全部)', align: 'center', slotStatus: true },  
          { prop: 'fysfylq', label: '是否已领取', align: 'center', slotStatus: true },   
          { prop: 'jszt', label: '结算状态', align: 'center', slotStatus: true },   
          { prop: 'sfxnyh', label: '是否虚拟用户', align: 'center', slotStatus: true },       
          { prop: 'sjtjrMc', label: '实际用户', align: 'center', slotStatus: true },  
          { prop: 'dljbId', label: '代理级别', align: 'center', slotStatus: true },
          { prop: 'yhzt', label: '状态', align: 'center', width: 150, slotStatus: true },
          { prop: 'tjrmc', label: '推荐人', align: 'center' },
          { prop: 'tjrmcNew', label: '新推荐人', align: 'center' },
          { prop: 'khhmc', label: '开户行名称', align: 'center' },
          { prop: 'khm', label: '开户名', align: 'center' },
          { prop: 'yhkh', label: '银行卡号', align: 'center' },
          { prop: 'shdz', label: '收获地址', align: 'center' },
          { prop: 'jssj', label: '结算时间', align: 'center' }
        ]
      },
      agentUserList: [],
      dialogVisible: false,
      dialogLoading: false
    }
  },
  filters: {
  },

  methods: {
    isConfirm (fysfylq) {
      if (fysfylq == 1) {
        return true
      } else {
        return false
      }
    },
    // 刷新页面
    goRefresh () {
      this.fetchData()
    },
    // 改变pagesize
    handleSizeChange (val) {
      this.tablePage = 1
      this.page.pageSize = val
      this.fetchData()
    },
    // 改变页码
    handleCurrentChange (val) {
      this.tablePage = val
      this.fetchData()
    },
    handleSearch () {
      this.tablePage = 1
      this.fetchData()
    },
    handleReset () {
      this.tablePage = 1
      this.queryData.agentId = ''
      this.queryData.username = ''
      this.queryData.custNo = ''
      this.queryData.phone = ''
      this.queryData.beginDate = ''
      this.queryData.endDate = ''
      this.changtime = ''
      this.queryData.isGet = ''
      this.queryData.isConfirm = ''
      this.queryData.isCascade = ''
      this.fetchData()
    },
    // 编辑
    handleEdit (item) {
      this.$confirm('是否确定领取奖励？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.confirmDialog(item.gxjId)
        })
        .catch(() => {})
    },
    // 获取代理人列表
    fetchGetAgentList () {
      this.$store.dispatch('agent/GetAgentUserList').then((res) => {
        if (res.code === 200) {
          this.agentUserList = res.data
        }
      })
    },
    // 获取代理人列表
    checkAgentUser () {
      this.$store.dispatch('agent/GetAgentUserList').then((res) => {
        if (res.code === 200) {
          this.agentUserList = res.data
        }
      })
    },
    // 导出
    download() {
      this.queryData.beginDate = this.changtime && this.changtime.length != 0 ? this.changtime[0] + ' 00:00:00' : ''
      this.queryData.endDate = this.changtime && this.changtime.length != 0 ? this.changtime[1] + ' 23:59:59' : '' 
      this.queryData.pageSize = this.page.pageSize
      this.queryData.pageIndex = this.tablePage
      this.exportLoding = true
      this.$store.dispatch('contribution/DownloadData', this.queryData).then((res) => {
          let blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'})
          let downloadElement = document.createElement('a')
          let href = window.URL.createObjectURL(blob)
          downloadElement.href = href
          // downloadElement.setAttribute('download', 'fileName')
          document.body.appendChild(downloadElement)
          downloadElement.click()
          document.body.removeChild(downloadElement)
          window.URL.revokeObjectURL(href)
          this.tableLoading = false
      })
      .catch((err) => {
        console.log(err)
        this.tableLoading = false
      })
    },
    // 提交订单
    confirmDialog (gxjId) {
      this.$store.dispatch('contribution/UpdateContribution', gxjId).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '领取成功'
          })
          this.dialogVisible = false
          this.fetchData()
          this.fetchGetAgentList()
        } else {
          this.$message.error(res.msg)
          // this.dialogVisible = false
        }
      })
    },    
    // 节点单击事件
    handleNodeClick(data) {
      this.queryData.agentId = data.id
      this.fetchData()
    },
    // 设置默认时间
    setDefaultData () {
      var nowdays = new Date()
      var year = nowdays.getFullYear()
      var month = nowdays.getMonth()
      if (month == 0) {
          month = 12
          year = year - 1
      }
      if (month < 10) {
          month = '0' + month
      }

      var myDate = new Date(year, month, 0)

      var startDate = year + '-' + month + '-01'
      var endDate = year + '-' + month + '-' + myDate.getDate()

      this.changtime = [startDate, endDate]
    },
    // 获取数据
    fetchData () {
      this.tableLoading = true
      this.queryData.beginDate = this.changtime && this.changtime.length != 0 ? this.changtime[0] + ' 00:00:00' : ''
      this.queryData.endDate = this.changtime && this.changtime.length != 0 ? this.changtime[1] + ' 23:59:59' : '' 
      this.queryData.pageSize = this.page.pageSize
      this.queryData.pageIndex = this.tablePage
      this.$store.dispatch('contribution/GetContributionList', this.queryData).then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.list
            if (this.tableData == '') {
              this.pageShow = false
            } else {
              this.pageShow = true
            }
            this.page.total = res.data.total
            this.page.currentPage = this.tablePage
          } else if (res.code == 500) {
            this.$message.error(res.msg)
          } else {
            this.$message.error(res.msg)
          }
          this.tableLoading = false
        })
        .catch((err) => {
          console.log(err)
          this.tableLoading = false
        })
    }
  },
  mounted () {
    this.setDefaultData()
    this.fetchData()
    this.fetchGetAgentList()
    // 权限配置
    let permission = sessionStorage.getItem('permission')
    if (permission) {
      permission = JSON.parse(permission)
      permission.forEach(p => {
        if (p.code == '14000' && p.permissions.indexOf('edit') != -1) {
          this.hasPermission = true
        }
      })
    }
  },
  computed: {
    stateType(state) {
        return function(state) {
            if (state == '0') {
              return '待确认'
            }
            if (state == '1') {
              return '已确认'
            }
            if (state == '2') {
              return '停用'
            }
            if (state == '3') {
              return '撤销'
            }
        }
    },
    dljbType(state) {
        return function(state) {
            if (state == 'jlwh0001') {
              return '市级代理'
            }
            if (state == 'jlwh0002') {
              return '省级代理'
            }
            if (state == 'jlwh0003') {
              return '大区代理'
            }
            if (state == 'jlwh0004') {
              return '一星代理'
            }
            if (state == 'jlwh0005') {
              return '二星代理'
            }
            if (state == 'jlwh0006') {
              return '三星代理'
            }
            if (state == 'jlwh0007') {
              return '四星代理'
            }
            if (state == 'jlwh0008') {
              return '五星代理'
            }
        }
    }
  }
}
</script>
<style scoped>
.contribution {
  padding: 10px 15px;
  margin: 0 !important;
  height: auto !important;
}

.contaniner {
  display: flex;
  height: 100%;
}
.left {
  width: 16%;
  height: 100%;
  margin-right: 10px;
}
.right {
  height: 100%;
  width: calc(84% - 10px);
}
</style>
<style lang="scss">
.contribution {
  .search-button {
    line-height: 30px !important;
  }
  .el-card__header {
    border-bottom: none !important;
  }
  .el-col-4 {
    width: 15%;
  }
  .el-date-editor {
    width: 100% !important;
  }
  .el-card__header,
  .el-card__body {
    padding: 15px;
  }
  .body {
    margin-top: 10px;
    background-color: #fff;
    .btn-list {
      float: right;
    }
    .fix-lh {
      line-height: 32px;
    }
    .text-right {
      text-align: right;
    }
    // .home-form{
    //     margin-bottom: 7px;
    //     margin-top: -17px;
    // }
    .el-input.is-disabled .el-input__inner {
      color: #606266;
    }
    .el-card__header,
    .el-card__body {
      padding: 15px;
    }
    .el-input.is-disabled .el-input__inner {
      color: #606266;
    }
    .el-table__body {
      tr td:nth-child(2) span {
        // color: #409eff;
        // cursor: pointer;
      }
      tr td:nth-child(5) span {
        // cursor: pointer;
      }
      tr td:nth-child(6) span {
        // color: #409eff;
        cursor: pointer;
      }
    }
    .table-body {
      margin-top: -15px;
    }
  }
  .el-select {
    width: 100%;
  }
  .top-bar {
    display: flex;
    min-width: 750px;
    .keyword-bar {
      width: 240px;
      margin-right: 10px;
    }
    .time-bar {
      width: 430px;
    }
  }
  .demo-ruleForm.el-input{
     width: 240px;
  }
}
</style>
